<template>
    <div class="mu-menu-item" :class="itemClass" @click="handle">
        <slot></slot>
    </div>
</template>

<script>
    import {
        lang
    } from 'muka'
    export default {
        name: 'mu-menu-item',
        data: function () {
            return {
                itemClass: {
                    'mu-menu-item-active': false
                }
            }
        },
        created: function () {
            this.$on('mu-active', (index) => {
                if (index === this.index) this.$set(this.itemClass, 'mu-menu-item-active', true)
                else this.$set(this.itemClass, 'mu-menu-item-active', false)
            })
        },
        props: {
            index: [Number, String],
            link: String
        },
        methods: {
            handle: function (e) {
                this.$parent.$emit('mu-selected', this.index)
                this.$emit('on-item-click', this.index)
                if (this.link && lang.isString(this.link)) {
                    this.$router.push(this.link)
                }
            }
        }
    }

</script>
